<template>
    <div class="layout-parent w100 p10">
        <el-tabs type="border-card">
            <el-tab-pane>
                <template #label><vp-label zh="基本信息" en="Basic Info"/></template>
                <div v-loading="loading">
                    <AbnormalList type="view" ref="abnormalListRef" />
                </div>
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程记录" en="Process Record"/></template>
                <ProcessHistory :processInsId="formData.processInsId"/>
            </el-tab-pane>
            <el-tab-pane v-if="formData.processInsId">
                <template #label><vp-label zh="流程图" en="Process Chart"/></template>
                <ProcessView :processInsId="formData.processInsId"/>
            </el-tab-pane>
            <el-tab-pane>
                <template #label><vp-label zh="操作记录" en="Operation Record"/></template>
                <RcList :id="formData.id"></RcList>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script lang="ts">
import { defineComponent, nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import ProcessHistory from '/@/components/vp/workflow/ProcessHistory.vue';
import ProcessView from '/@/components/vp/workflow/ProcessView.vue';
import request from '/@/utils/request';
import RcList from "/@/components/vp/operationRecord/VpOperationRecordCard.vue";
import AbnormalList from '../component/AbnormalList.vue';

export default defineComponent({
    name:'viewAbnormalList',
    props: {
        id: String,
    },
    components: { ProcessHistory, ProcessView, RcList, AbnormalList },
    setup(props) {
        const state = reactive({
            loading: false,
            formData: {
                id: "",
                processInsId: "",
            }
		});

        const processHandleRef = ref();
        const abnormalListRef = ref();

        onMounted(() => {
            loadForm();
        });

        const loadForm = () => {
            state.loading = true;
            nextTick(() => {
                request.get(`/abnormal/list/${props.id}`).then((res)=>{
                    state.formData.id = res.data.id;
                    state.formData.processInsId = res.data.processInsId;
                    abnormalListRef.value.setData({
                        ...res.data
                    });
                    state.loading = false;
                })
            })
        };


        return {
            ...toRefs(state),
            processHandleRef,
            abnormalListRef,
        }
    },
})
</script>